<template>
  <div class='class-item' @click="$emit('itemClick')">
    <div class='img-box'>
      <img :src="src" alt="">
    </div>
    <div class='class-info-box'>
      <h2 class='title'>
        <span :class='classType ? "single" : "muitle"'>{{classType ? '单课' : '多课'}}</span>{{title}}
      </h2>
      <div class='row row2' v-if='!classType'>
        <p>共{{maxCount}}集，更新至{{currentCount}}集</p>
        <p v-if='maxCount > currentCount' class='add-btn text-center' @click.stop='$emit("add")'>添加教学视频</p>
        <p v-if='maxCount === currentCount'>已完结</p>
      </div>
      <div class='row' v-if='classType'>
        <p class='opr-box'>
          <span class='time'>2018-02-21</span>
          <span class='remove' @click.stop='$emit("remove")'>删除</span>
          <span class='edit' @click.stop='$emit("edit")'>编辑</span>
        </p>
        <p class='status-box' @click.stop='$emit("statusClick", status)'>
          <span class='success' v-if='status === 0'>待转码</span>
          <span class='success' v-if='status === 1'>已上架</span>
          <span class='reviewing' v-if='status === 2'>审核中</span>
          <span class='faild' v-if='status === 3'>审核失败></span>
        </p>
      </div>
       <!--  --> 
      <div class='row' v-if='classType && status === 0' >
        <div class='icon-item'>
          <img src="./../../assets/bofang.png" alt="">
          <span>{{playCount}}</span>
        </div>
        <div class='icon-item'>
          <img src="./../../assets/moneybag.png" alt="">
          <span>{{price}}</span>
        </div>
        <div class='icon-item'>
          <img src="./../../assets/comment.png" alt="">
          <span>{{flower}}</span>
        </div>
        <div class='icon-item'>
          <img src="./../../assets/upvote.png" alt="">
          <span>{{upvote}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    src: { // 图片地址
      type: String,
      default: 'http://micro.resource.huawa.com/upload/lession/201812/05fbacf9a194ae0306196bb253df35ab.jpg'
    },
    classType: { // 课程类型 false：多课， true: 单课
      type: Boolean,
      default: false
    },
    title: { // 标题
      type: String,
      defalut: ''
    },
    time: { // 时间
      type: [String, Date],
      default: () => new Date()
    },
    status: { // 当前状态
      type: [String, Number],
      defalut: 0
    },
    statusStr: {
      type: String,
      defalut: ''
    },
    playCount: { // 播放数
      type: [String, Number],
      defalut: 0
    },
    price: { // 价格？
      type: [String, Number],
      defalut: 0
    },
    flower: { // 鲜花数
      type: [String, Number],
      defalut: 0
    },
    upvote: { // 点赞数
      type: [String, Number],
      defalut: 0
    },
    maxCount: { // 如果是多课的话最多数量
      type: Number,
      default: 2
    },
    currentCount: { // 如果是多课的话当前传到哪一课了
      type: Number,
      default: 1
    }
  }
}
</script>

<style lang="scss" scoped>
.text-center{
  display: flex;
  align-items: center;
  justify-content: center;
}
.class-item{
  display: flex;
  padding: .27rem 0;
  border-bottom: 1px solid #e4e4e4;
  .img-box{
    width: 1.88rem;
    height: 1.36rem;
    overflow: hidden;
    flex-shrink: 0;
    img{
      width:100%;
      height: 100%;
    }
  }
  .class-info-box{
    margin-left: .22rem; 
    flex: 1;
    .title{
      color:#333;
      font-size: .26rem;
      min-height: .82rem;
      line-height: .36rem;
      letter-spacing: -1px;
      span{
        display: inline-block;
        width: .67rem;
	      height: .35rem;
        line-height: .36rem;
        text-align: center;
        color:#fff;
        border-radius: 2px;
        margin-right: 3px;
      }
      .muitle{
        background: #e7470d;
      }
      .single{
        background: #00a42a;
      }
    }
    .row{
      display: flex;
      justify-content: space-between;
      align-content: center;
      margin-top: .14rem;
      .opr-box{
        font-size: .22rem;
        color: #999999;
        .remove{
          margin-left: .18rem;
        }
        .edit{
          margin-left: .13rem;
          color: #0079df;
        }
      }
      .status-box{
        font-size: .22rem;
        .success{
          color: #00a42a;
        }
        .reviewing{
          color: #eb5b29;
        }
        .faild{
          color: #ff0000;
        }
      }
      .icon-item{
        display: flex;
        align-items: center;
        // flex-direction: column;
        color: #777;
        font-size: .20rem;
        overflow: hidden;
        vertical-align: baseline;
        // text-align: center;
        img{
          width: .20rem;
	        height: .20rem;
          margin-right: 3px;
        }
        span{
          padding-top: 1px;
          line-height: .23rem;
        }
        &:nth-child(2){
          img{
            width: .19rem;
	          height: .20rem;
          }
        }
        &:nth-child(3){
          img{
            width: .18rem;
	          height: .20rem;
          }
        }
      }
      .add-btn{
        width: 1.65rem;
        height: .54rem;
        background-color: #ffffff;
        border: solid 1px #666666;
        border-radius: 5px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
    .row2{
      margin-top: -.1rem;
      align-items: center;
    }
  }
}
</style>

